<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
     <style>

            * {
                
            margin: 0;
            padding: 0;
            list-style: none;
            } 


             main {
             width: 100vw;
            background: linear-gradient(rgb(155, 153, 153), rgb(58, 57, 57));
            /* background: rgb(99, 97, 97); */
           
          }
          
            .nav {
                position: sticky;
                top:0;
                display: flex;
                justify-content: space-between;
                width: 100vw;
                height: 50px;
                /* background: rgb(99, 97, 97); */
                border: 0.5px solid transparent;
                z-index: 999;
            }

            .nav .box {
                width: 50px;
                height: 50px;
              
            }

            .nav .box2 {
                width: 400px;
                height: 50px;         
            }
             .nav ul {
                display: flex;
                width: 100%;
        
                margin: 10px auto;
             }

             .nav ul li {
                flex: 0 0 80px;
                width: 80px;
                height: 30px;
                border: 1px solid rgb(73, 73, 73);
                margin-left: 10px;
                text-align: center;
                line-height: 30px;
                border-radius: 10px;
               
               
             }

             .nav ul li:hover {
                background: rgb(108, 107, 106);
                transform: scale(1.1);
             }

             .nav ul li a:hover {
                color: azure;
             }
             .nav ul li a {
                text-decoration: none;
                color: black;
             }

             #contaner {
                 width: 100vw;
                height: 400px;
                /* background: linear-gradient(rgb(155, 153, 153), rgb(58, 57, 57)); */
                border: 0.5px solid transparent;
             }




             #person {
                display: flex;
                width: 100vw;
            
                background-color: rgb(99,97,97);
                justify-content: space-around;
               
             }
             #person .pic {
                 width: 480px;
                 height: 320px;
                 margin-left: 10px;
                 


             }


             #person .pic img {
                width: 100%;
                height: 100%;
                transition: all .2s linear;
             }

             #person .pic img:hover {
                transform: scale(1.1);
             }
             #person .text {
                 width: 400px;
                 height: 350px;
                 margin-top: 80px;
                 border-radius: 10px;
                 padding: 5px;
                 


              }

              #person .text span {
                font-weight: bolder;
              }

              #person .text p:nth-child(2) {
                margin-top: 10px;
                text-indent:2em;
              }

              #person .text p:nth-child(3) {
                  margin-top: 10px;
              }


             #skill {

                width: 100vw;
                border: 1px solid transparent;
                background-color: rgb(99,97,97);
               
             }

             #skill h2 {
                text-align: center;
               
             }

             #skill .skill-box {
                 display: flex;
                 justify-content: space-around;
                 width: 100%;
                 height: 300px;
                 margin-top: 80px;
                 /* background: blue; */
             }

             #skill .skill-box .sk1 {
               
                /* background: burlywood; */
                text-align: center;
                
             }

             #skill .skill-box .sk1-log {
                    
                     width: 150px;
                     height: 150px;
                     background: black;
                     border-radius: 50%;
                     text-align: center;
                     line-height: 150px;
                     color: white;
             }

             #skill .skill-box .sk1 .mask1 {
                
                 width: 120px;
                 height: 120px;
                 background: rgb(99, 97, 97);
                 /* border: 1px solid red; */
                 border-radius: 35%;
                 transform: translate(15px,-247px) rotate(15deg);
                 animation: move1 10s linear -15s infinite;
             }          

             #skill .skill-box .sk1 .mask2 {
                
                width: 120px;
                height: 120px;
                background: rgb(99, 97, 97);
                /* border: 1px solid red; */
                border-radius: 45%;
                transform: translate(30px,-360px) rotate(15deg);
                animation: move2 5s linear -15s infinite;
            }



             @keyframes move1{
                  
                0% {

                    transform: translate(15px,-247px) rotate(15deg);
                }

                100% {
                    transform: translate(15px,-247px) rotate(360deg);  
                }
                 
             }


             @keyframes move2{
                  
                  0% {
  
                    transform: translate(30px,-360px) rotate(15deg);
                  }
  
                  100% {
                    transform: translate(30px,-360px) rotate(360deg);
                  }
                   
               }





             #porject {

                width: 100vw;
                height: 350px;
                border: 1px solid red;
             }
     </style>
</head>
<body>
    <main>
           <div class="nav">
                  <div class="box"></div>
                  <div class="box2">
                 <ul>
                 <li><a href="">首页</a></li>
                 <li><a href="#person">个人介绍</a></li>
                 <li><a href="#skill">个人技能</a></li>
                 <li><a href="#porject">个人项目</a></li>
             
                </ul>
                  </div>
              

           </div>

            <!-- 主区域 -->
            <div id="contaner">
                 
                <div class="wrap">
                    <div class="cube">
                        <div class="outer-front"></div>
                        <div class="outer-back"></div>
                        <div class="outer-left"></div>
                        <div class="outer-right"></div>
                        <div class="outer-top"></div>
                        <div class="outer-bottom"></div>
                
                        <span class="inner-front"></span>
                        <span class="inner-back"></span>
                        <span class="inner-left"></span>
                        <span class="inner-right"></span>
                        <span class="inner-top"></span>
                        <span class="inner-bottom"></span>
                    </div>
                </div>

 



            </div>


              <div id="person">
              

                  <div class="pic">
                    <img src="./img/2.jpg" alt="">
                  </div>
                  <div class="text">
                       <h2>个人介绍</h2>
                        <p>大家好，我叫谢家莉,我是一名计算机专业的学生。
                            在校期间我对前端的知识有着浓厚的兴趣，学习前端是幸苦的也是枯燥的，但是当看自己一步一步完成项目的时候。
                            在多的辛苦也值得的,每一个项目的完成,驱使自己坚持不断学习前端。
                            这就是web前端开发带给我的乐趣</p>
                        <p>  <span> 学校：</span>广州科技职业技术大学</p>
                        <p><span> 专业：</span>计算机应用工程</p>
                        <p><span> 学历：</span>本科</p>
                        <p><span> 电话：</span>13664936875</p>
                        <p><span> 邮箱：</span>2102165273@qq.com</p>
                        



                  </div>
              </div>
            <div id="skill">
                <h2>个人技能</h2>

                 <div class="skill-box">

                    <div class="sk1">
                      
                         <div class="sk1-log">
                             90%
                          
                         </div>
                          <p>css&html</p>
                         <div class="mask1"></div>
                         <div class="mask2"></div>
                        
                     </div>
    
                     <div class="sk1">
                       
                         <div class="sk1-log">
                            80%
                         </div>

                         <p>JavaScript</p>
                         <div class="mask1"></div>
                         <div class="mask2"></div>
                     </div>
    
                     <div class="sk1">
                       
                         <div class="sk1-log">
                            85%
                         </div>
                         <p>Vue</p>
                         <div class="mask1"></div>
                         <div class="mask2"></div>
                     </div>
                 </div>
                 

            </div>

            <div id="porject">
                 <p>个人项目</p>
            </div>
    </main>
</body>
</html>
